<template>
  <div class="box">
    <div class="dian">
      <div class="kongbai"></div>
      <div class="xx">
        <span class="sp1">{{details.name}}</span>
        <span :class="details.closed==0?'sp2':'sp3'">{{details.closed==0?'已打样':'营业中'}}</span>
        <p class="p1">骑士配送·30分钟送达</p>
        <p class="p2">全心全意提供优质的服务，我们一直在努力！</p>
      </div>
    </div>
    <div class="sjxx">
      <div class="sj">
        <div></div>
        <p>商家信息</p>
      </div>
      <div>
        <span class="span1">商家地址</span>
        <span
          class="span2" @click="callMap"
          >{{details.province}}{{details.city}}{{details.borough}}{{details.address}}</span>
      </div>
      <div>
        <span class="span1">营业时间</span>
        <span class="span2">{{details.openTime}}</span>
      </div>
      <div @click="goPhoneCall(details.phone)">
        <span class="span1">商家电话</span>
        <span class="span2">{{details.phone}}</span>
        <img src="/static/imgs_s01/s01_gengduo.png" alt />
      </div>
    </div>
    <div class="yyxk" @click="goBusinesslicense(details.businessLicense)">
      <span>营业许可资质</span>
      <img src="/static/imgs_s01/s01_gengduo.png" alt />
    </div>

    <div class="ctfw">
      <div class="ct">
        <div></div>
        <p>餐厅服务</p>
      </div>
      <div class="fw">
        <div v-for="(list, index) in facilityList" :key="index">
          <div :class="'fw' + index%2">
            <img :src="list.icon" alt />
            <p class="p1">{{list.title}}</p>
            <p class="p2">{{list.description}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="sjsj">
      <div class="sj">
        <div></div>
        <p>商家实景</p>
      </div>
      <span v-for="(image,index) in images" :key="index">
        <img :src="image" alt />
      </span>
    </div>
  </div>
</template>

<script>
//导入位置服务的js文件
import QQMapWX from "../../../static/js/qqmap-wx-jssdk.js";
export default {
  data() {
    return {
      qqmapsdk: {},
      facilityList: [],
      details: {},
      images: []
    };
  },

  methods: {
    //电话页面跳转
    goPhoneCall(number) {
      console.log(number);
      wx.navigateTo({ url: "/pages/s01_indexphone/main?number=" + number });
    },
    //营业许可证页面的跳转
    goBusinesslicense(bl) {
      wx.navigateTo({ url: "/pages/s01_yingyezhizhao/main?img=" + bl });
    },
    // 地图导航
    callMap() {
      this.getLocation();
      console.log(this.details.province+this.details.city+this.details.borough+this.details.address);
    },
    //跟据目标地址获取经纬度
    getLocation() {
      // 调用接口
      this.qqmapsdk.search({
        keyword: this.details.province+this.details.city+this.details.borough+this.details.address,
        success: ({data}) => {
          console.log(data);
          this.getPath(data[0].location);
        },
        fail: function(res) {
          console.log(res);
        },
        complete: function(res) {
          console.log(res);
        }
      });
    },
    //跟据经纬度打开目的地位置
    getPath(location){
      wx.getLocation({
        type: "gcj02", //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
        success: res => {
          const latitude = location.lat;
          const longitude = location.lng;
          wx.openLocation({
            name: this.details.name,
            address: this.details.province+this.details.city+this.details.borough+this.details.address,
            latitude, //纬度，范围为-90~90，负数表示南纬,
            longitude, //经度，范围为-180~180，负数表示西经,
            scale: 18 //缩放比例，范围5~18,
          });
        },
        fail: () => {
          console.log("getLocation failed");
        }
      });
    }
  },
  onLoad() {
    const that = this;
    // 获取店家详情的数据
    var url = "http://localhost:7777/prom/storeDetails?shopid=1";
    wx.request({
      url,
      success(data) {
        console.log(data);
        if (data.statusCode == 200) {
          that.facilityList = data.data.facilityList;
          that.details = data.data.details;
          that.images = JSON.parse(data.data.details.images);
        } else {
          wx.navigateTo({ url: "/pages/s01_jiazaishibai/main" });
        }
      },
      fail(err) {
        console.log(err);
      }
    });
    //实例化导航API的核心类
    this.qqmapsdk = new QQMapWX({
      //key可以去https://lbs.qq.com/qqmap_wx_jssdk/index.html申请
      key: "4XTBZ-ZKA6F-NETJX-JPSZ7-SEUP2-AJBFB"
    });
  },
  created() {}
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f0f2f5;
}

.dian {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 122px;
  background-color: white;
}

.dian .kongbai {
  width: 91px;
  height: 91px;
  background: rgba(226, 226, 226, 1);
  border-radius: 6px;
  margin-left: 8px;
  margin-top: 11px;
}

.dian .xx .sp1 {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  margin-left: 9px;
  margin-top: 15px;
}

.dian .xx .sp2 {
  display: inline-block;
  width: 45px;
  height: 16px;
  margin-top: 15px;
  margin-left: 9px;
  line-height: 16px;
  text-align: center;
  background: rgba(209, 24, 38, 1);
  border-radius: 8px;
  font-size: 10px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.dian .xx .sp3 {
  display: inline-block;
  width: 45px;
  height: 16px;
  margin-top: 15px;
  margin-left: 9px;
  line-height: 16px;
  text-align: center;
  background: rgb(24, 209, 55);
  border-radius: 8px;
  font-size: 10px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.dian .p1 {
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  margin-left: 9px;
  margin-top: 19px;
  color: rgba(102, 102, 102, 1);
}

.dian .p2 {
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  margin-left: 9px;
  margin-top: 9px;
  color: rgba(102, 102, 102, 1);
}

.sjxx {
  width: 100%;
  height: 200px;
  margin-top: 9px;
  background-color: white;
}

.sjxx div {
  height: 50px;
  line-height: 50px;
}

.sjxx .sj {
  display: flex;
  flex-direction: row;
}

.sjxx .sj div {
  margin-left: 12px;
  margin-top: 18px;
  width: 5px;
  height: 17px;
  background: rgba(86, 189, 142, 1);
  border-radius: 2px;
}

.sjxx .sj p {
  margin-left: 8px;
  margin-top: 10px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(41, 43, 50, 1);
  line-height: 32px;
}

.sjxx .span1 {
  margin-left: 13px;
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

.sjxx .span2 {
  margin-left: 13px;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.sjxx img {
  width: 13px;
  height: 13px;
  margin-left: 169px;
}

.yyxk {
  margin-top: 9px;
  height: 48px;
  background-color: white;
}

.yyxk span {
  margin-top: 19px;
  margin-left: 17px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(41, 43, 50, 1);
}

.yyxk img {
  width: 7px;
  height: 13px;
  margin-top: 18px;
  margin-left: 235px;
}

.ctfw {
  height: 188px;
  background-color: white;
  margin-top: 11px;
}

.ctfw .ct {
  display: flex;
  flex-direction: row;
  height: 63px;
}

.ctfw .ct div {
  margin-top: 23px;
  margin-left: 12px;
  width: 5px;
  height: 17px;
  background: rgba(86, 189, 142, 1);
  border-radius: 2px;
}

.ctfw .ct p {
  margin-top: 21px;
  margin-left: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(41, 43, 50, 1);
}

.ctfw .fw {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.ctfw .fw div {
  position: relative;
  height: 62px;
}

.ctfw .fw .fw1 {
  width: 160px;
}

.ctfw .fw .fw0 {
  width: 215px;
}

.ctfw .fw img {
  position: absolute;
  top: 0;
  left: 18px;
  width: 39px;
  height: 39px;
}

.ctfw .fw .p1 {
  position: absolute;
  top: 5px;
  left: 65px;
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(41, 43, 50, 1);
}

.ctfw .fw .p2 {
  position: absolute;
  top: 26px;
  left: 65px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(144, 144, 144, 1);
}

.sjsj {
  margin-top: 9px;
  margin-bottom: 13px;
  height: 183px;
  background-color: white;
}

.sjsj .sj {
  display: flex;
  flex-direction: row;
  height: 59px;
}

.sjsj .sj div {
  width: 5px;
  height: 17px;
  background: rgba(86, 189, 142, 1);
  border-radius: 2px;
  margin-top: 25px;
  margin-left: 12px;
}

.sjsj .sj p {
  margin-top: 23px;
  margin-left: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(41, 43, 50, 1);
}

.sjsj img {
  width: 100px;
  height: 100px;
  margin-left: 18px;
}
</style>
